<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>万有引力</title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="500" style="border: 1px solid #ccc">
        糟糕 你的浏览器 我还搞不懂也？
    </canvas>
    <script src="../script/wind/wind-all-0.7.3.js"></script>
    <script>
        const myCanvas = document.getElementById("myCanvas");
        const myCanvasCtx = myCanvas.getContext("2d");
        const ball = {
            position: {x: 100, y: 100},
            r: 15,
            vx: 0,
            vy: 0
        }
        let hitCount = 0;
        const cyc = 10;
        const a = 50;

        const arc = function () {
            myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
            myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
            myCanvasCtx.fillStyle = "#fff";
            myCanvasCtx.beginPath();
            myCanvasCtx.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
            myCanvasCtx.closePath();
            myCanvasCtx.fill();
        }

        // 这是一个弹跳的小球
        const moveAsync = eval(Wind.compile("async", function () {
            while (true) {
                myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
                myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
                myCanvasCtx.fillStyle = "#fff";
                myCanvasCtx.beginPath();
                myCanvasCtx.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
                myCanvasCtx.closePath();
                myCanvasCtx.fill();

                // 位移是速度对时间的累积
                ball.position.y += ball.vy * cyc / 1000;
                if (ball.r + ball.position.y >= myCanvas.height) {
                    ball.vy *= -1;
                } else {
                    ball.vy += a; // 速度是加速度对时间的累积
                }
                $await(Wind.Async.sleep(cyc, null));
            }
        }));

        const moveAsync2 = eval(Wind.compile("async", function () {
            while (true) {
                myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
                myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
                myCanvasCtx.fillStyle = "#fff";
                myCanvasCtx.beginPath();
                myCanvasCtx.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
                myCanvasCtx.closePath();
                myCanvasCtx.fill();

                // 位移是速度对时间的累积
                ball.position.y += ball.vy * cyc / 1000;
                if (ball.r + ball.position.y >= myCanvas.height) {
                    ball.vy *= -0.7; // 碰撞之后速度降低 方向相反
                    hitCount++;
                } else {
                    ball.vy += a; // 速度是加速度对时间的累积
                }
                if (hitCount > 1500) break;
                $await(Wind.Async.sleep(cyc, null));
            }
        }));




        window.onload = function () {
            moveAsync2().start();
        }

    </script>

</body>
</html>